<template>
	<view class="reset-container">
		<view style="position: relative;">
			<image class="reset-img" src="/static/image/shebei.png" mode="widthFix" />

			<view class="arrow-label" style="position: absolute;top:  110rpx;right:  110rpx;">
				<view class="arrow"></view>
				<text class="label-text">蓝牙复位</text>
			</view>
		</view>
		<view class="reset-steps">
			<view class="reset-step">
				<text class="reset-step-num">1、</text>
				<text class="reset-step-title">重新开启设备蓝牙，如图示位置</text>
			</view>
			<view class="reset-substep">• 长按水机蓝牙复位按键三秒，重新开启蓝牙</view>
			<view class="reset-substep">• 开启后会有指示灯亮起</view>
			<view class="reset-step" style="margin-top: 32rpx;">
				<text class="reset-step-num">2、</text>
				<text class="reset-step-title">开启手机蓝牙进行配对</text>
			</view>
		</view>

		<button class="reset-btn u-f-ajc">确认已开启</button>
	</view>
</template>

<script>
export default {}
</script>

<style scoped>
.arrow-label {
	display: flex;
	align-items: center;
}

.arrow {
	width: 60rpx;
	height: 0;
	border-top: 2rpx solid #222;
	position: relative;
	margin-right: 10rpx;
}

.arrow::before {
	content: '';
	position: absolute;
	left: 0;
	top: -8rpx;
	width: 0;
	height: 0;
	border-top: 8rpx solid transparent;
	border-bottom: 8rpx solid transparent;
	border-right: 12rpx solid #222;
}

.label-text {
	font-size: 36rpx;
	color: #222;
	font-weight: 500;
}

.reset-container {
	min-height: 100vh;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 0 40rpx 0;
}

.reset-img {
	width: 750rpx;
	height: 460rpx;
	margin: 48rpx 0 32rpx 0;
	display: block;
}

.reset-steps {
	width: 90vw;
	max-width: 680rpx;
	margin: 0 auto 0 auto;
	font-size: 30rpx;
	color: #222;
}

.reset-step {
	display: flex;
	align-items: baseline;
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 12rpx;
	color: #111;
}

.reset-step-num {
	font-size: 32rpx;
	font-weight: bold;
	color: #111;
}

.reset-step-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #111;
}

.reset-substep {
	font-size: 28rpx;
	color: #222;
	margin-left: 36rpx;
	margin-bottom: 6rpx;
	line-height: 1.7;
}

.reset-btn {
	position: fixed;
	bottom: 150rpx;
	width: 90vw;
	max-width: 600rpx;
	height: 108rpx;
	background: #000;
	color: #fff;
	border-radius: 54rpx;
	font-size: 32rpx;
	font-weight: bold;
	border: none;
	margin-top: 120rpx;
	letter-spacing: 2rpx;
}
</style>
